웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
html5의 가장 큰 특징 중 하나가 바로 Canvas API에 의한 그래픽 구현의 기능 및 성능 향상을 빼놓을 수 없습니다. 게다가 canvas 태그를 사용해 2d 또는 3d 이미지의 구현 역시 가능하죠. canvas 태그는 자바스크립트를 함께 사용해야 하며 다양한 도형을 그릴 수 있다. 아래는 canvas 태그를 사용한 사각형을 그리는 예제를 통해 canvas 태그를 사용하는 방법에 대하여 익혀보겠습니다.
# 캔버스 태그를 사용한 사각형 그리기
먼저 예제를 사용하여 알아봅니다. 아래는 canvas 예제를 알아보기 위해 사용하는 html 및 css 코드입니다.@ canvas.html
@ canvas.css
canvas {
border: 1px solid #999;
width: 200px;
height: 100px;
}
border: 1px solid #999;
width: 200px;
height: 100px;
}
canvas 태그를 지원하지 않는 경우 canvas 태그 내부에 입력한 문구가 그대로 사용자에게 노출됩니다. canvas를 지원하지 않는 경우 사용자에게 최신 브라우저를 다운받게하기위해 아래의 문구를 넣었습니다.
Sorry. Your browser is not support our pages.
css를 통해 캔버스 영역을 표시할 수 있도록 간단한 스타일을 부여하였습니다. 아래는 이 캔버스 영역에 자바스크립트를 사용해 사각형을 만드는 스크립트 코드입니다.
# canvas 태그 자바스크립트코드 예제
이제 자바스크립트 코드를 알아봅니다.@ canvas.js
var cv = $('#cv')[0];
// 변수 cv에 #cv 요소를 저장
context = cv.getContext('2d');
context2 = cv.getContext('2d');
context3 = cv.getContext('2d');
// 캔버스 태그에 3가지 콘텍스트를 생성
context.fillRect(70, 10, 50, 50);
// 색으로 채워진 사각형
context2.strokeRect(10, 10, 50, 50);
// 외곽선만 가지는 사각형
context3.clearRect(90, 30, 10, 10);
// 해당 영역을 지움
// 변수 cv에 #cv 요소를 저장
context = cv.getContext('2d');
context2 = cv.getContext('2d');
context3 = cv.getContext('2d');
// 캔버스 태그에 3가지 콘텍스트를 생성
context.fillRect(70, 10, 50, 50);
// 색으로 채워진 사각형
context2.strokeRect(10, 10, 50, 50);
// 외곽선만 가지는 사각형
context3.clearRect(90, 30, 10, 10);
// 해당 영역을 지움
위 코드는 3가지 사각형을 그리기 위하여 context, context2, context2 변수를 사용해 각각의 캔버스 영역을 선택, 지정하였습니다. 그리고 fillRect() 함수를 사용.. 다양한 사각형을 그려보았습니다. fillRect()는 아래와 같은 속성값을 지정하여 사용합니다.
context.fillRect(x, y, width, height);
// x는 좌우값
// y는 상하값
// width는 사각형의 좌우 길이값
// height는 사각형의 상하 높이값
context.strokeRect(x, y, width, height);
// x는 좌우값
// y는 상하값
// width는 사각형의 좌우 길이값
// height는 사각형의 상하 높이값
내부를 채우는 경우 fillRect()를 사용하나 외곽선만 사용할 경우는 strokeRect()를 사용하여 그릴 수 있죠.
# 실제 코드를 실행해보기
실제 이 코드를 아래에 구현해보도록 하겠습니다. 아래의 실행 결과를 확인해보세요. 왼쪽에 위치한 엘리먼트는 context2이며 오른쪽은 context입니다.위 예제를 보면 두개의 사각형을 canvas 태그를 사용해 그려본 예제입니다. 그리고 두번째 사각형 가운데 홈은 clearRect()를 사용하여 해당 영역을 삭제하여 하얀 사각형이 나타났습니다. 이처럼 canvas 태그에 매우 간단하게 사각형을 그릴 수 있습니다.
아래의 글도 찾고 계시지 않나요?
